<template>
  <div class="time-series-heatmap">
    <div class="section-header">
      <h3>时间序列热图</h3>
    </div>
    
    <div class="time-series-list">
      <div 
        v-for="(timeData, index) in timeData" 
        :key="index"
        class="time-series-item"
      >
        <div class="time-label">
          {{ timeData.time }}
        </div>
        <div class="heatmap-preview">
          <div 
            class="heatmap-gradient"
            :style="{ 
              background: generateGradient(timeData.intensity),
              opacity: timeData.intensity 
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeSeriesHeatmap',
  props: {
    timeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    generateGradient(intensity) {
      // 根据强度生成径向渐变
      const redOpacity = Math.min(0.70 * intensity, 0.70)
      const yellowOpacity = Math.min(0.50 * intensity, 0.50)
      const blueOpacity = Math.min(0.30 * intensity, 0.30)
      
      return `radial-gradient(50% 50% at 50% 50%, rgba(255, 77, 79, ${redOpacity}) 0%, rgba(250, 173, 20, ${yellowOpacity}) 30%, rgba(22, 119, 255, ${blueOpacity}) 70%, rgba(248, 248, 248, 0.00) 90%, rgba(0, 0, 0, 0.00) 90%)`
    }
  }
}
</script>

<style scoped>
.time-series-heatmap {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin: 0;
  line-height: 24px;
  margin-bottom: 12px;
}

.time-series-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-series-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-label {
  color: #6B7280;
  font-size: 12px;
  line-height: 16px;
}

.heatmap-preview {
  background: #F8F8F8;
  border-radius: 6px;
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.heatmap-gradient {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.time-series-item:hover .heatmap-gradient {
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .time-series-heatmap {
    padding: 16px;
  }
  
  .heatmap-preview {
    height: 50px;
  }
}
</style>
